<template>
    <div style="
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color:whitesmoke;
    ">
        <div style="width: 100%;height: 10%;background-color: white;padding-left: 20px;">
            <el-button :icon="Back" @click="()=>{router.replace('/');}"/>
        </div>
        <div style="
        width: 80%;
        height: 86%;
        background-color: white;
        margin-top: 15px;">
            <el-scrollbar style="width: 100%;height: 100%;" v-loading="loading">
                <h2>{{ pageStruct.title }}</h2>
                <el-divider style="margin-top: 0;margin-bottom: 5px;" />
                <div style="width: 100%;" v-html="pageStruct.content" id="htmlContent"></div>
            </el-scrollbar>
        </div>
    </div>
</template>
<script setup>
import {Back} from '@element-plus/icons-vue'
import { onMounted, reactive, ref } from 'vue';
import axios from 'axios';
import {useRoute} from 'vue-router'
import router from '@/router'

const route=useRoute();

let loading=ref(true);
let pageStruct=reactive({
    title:'',
    content:''
});

onMounted(function(){
    axios.get(`http://127.0.0.1:8080/articles/${route.params.id}`)
        .then(function(response){
            Object.assign(pageStruct,response.data);
        }).catch(function(error){
            pageStruct.title='加载失败';
            pageStruct.content=error.message;
        }).finally(function(){
            loading.value=false;
        });
});
</script>
<style module>
#htmlContent p{
    margin: 5px;
}

blockquote {
    border-left: 4px solid #4a9ff5; /* 左侧装饰线 */
    background-color: #f5f9ff; /* 背景色 */
    padding: 5px 5px 5px 10px;
    margin: 5px 5px 5px 0px;
    color: #2c3e50; /* 文字颜色 */
}

</style>
<style scoped>
 h2{
    margin: 10px;
}

</style>